<!--授予权限-->
<template>
  <div class="wrapper-container">
    <div class="search-container">
      <div class="search-container-item right20">
       <div class="item-name">学期：</div>
         <el-select v-model="dataForm.xqmc" placeholder="请选择" class="width110" size="mini">
                <el-option v-for="item in xq" :key="item.id" :label="item.xqmc" :value="item.xqmc"></el-option>
            </el-select>
      </div>
      <div class="search-button color-primary width70" @click="initList">
        <img src="../../../assets/assessment/icon-search.png" alt="" />
        <span>查询</span>
      </div>
    </div>
    <div class="table-container table-css">
      <el-table :data="tableData" border style="width: 100%" class="table-data" :header-cell-style="{background:'#edf2f9','border-color': '#c7d7eb'}">
        <el-table-column prop="teachAuthType" label="授权数据类型" align="center"></el-table-column>
        <el-table-column label="被授予人" align="center" >
          <div class="icon" @click="openDialog" slot-scope="scope">
            <a v-for="(i,k) in scope.row.teachers" :key="i.userId">{{i.xm}}
              <span v-if="scope.row.teachers.length>0 && k !== scope.row.teachers.length - 1">、</span>
            </a>
            <span class="red-size" v-if="scope.row.teachers.length>0">(已选{{scope.row.teachers.length}}人)</span>
            <img src="../../../assets/assessment/icon-etc.png">
          </div>
        </el-table-column>
      </el-table>
    </div>
    <div class="button-group">
      <div style="margin-right:0" @click="givenInfo">授权</div>
    </div>
    <!-- 选人 -->
    <el-dialog title="被授予人选择" :visible.sync="dialogVisible" :close-on-click-modal="false" width="80%">
      <div class="">
        <div class="top-box">
          <div class="search-container">
            <div class="search-container-item right20">
              <div class="item-name">按姓名：</div>
              <el-input style="width:110px" size="mini"></el-input>
            </div>
            <div class="search-button color-primary width70" @click="initRoleList">
              <img src="../../../assets/assessment/icon-search.png" alt="" />
              <span>查询</span>
            </div>
          </div>
        </div>
        <div class="bottom-box">
          <div class="left">
            <el-tree :props="defaultProps" @node-click="handleNodeClick" :indent="0" lazy :load="loadNode"></el-tree>
          </div>
          <div class="right">
            <div class="tableArray">
              <div class="table-container table-css tableWidth" >
                <el-table :data="roleData" border style="width: 100%" @selection-change="handleSelectionChange" class="table-data" :header-cell-style="{background:'#edf2f9','border-color': '#c7d7eb'}">
                  <el-table-column label="可选的人员" align="center">
                    <el-table-column align="center" type="selection" width="60"></el-table-column>
                    <el-table-column label="姓名" prop="xm" align="center" width="120" ></el-table-column>
                    <el-table-column label="单位" prop="daszdw" align="center" ></el-table-column>
                  </el-table-column>
                </el-table>
              </div>
              <img class="right-arrow" src="../../../assets/assessment/right-remove.png" @click="removeData">
              <div class="table-container table-css tableWidth">
                <span class="small-btn delete-red position" @click="delAll">
                    <img src="../../../assets/assessment/icon-delete.png"> 全部删除
                </span>
                <el-table :data="selectTableData" border style="width: 100%" class="table-data" :header-cell-style="{background:'#edf2f9','border-color': '#c7d7eb'}">
                 <el-table-column :label="'已选的人员('+selectTableData.length+'个）'" align="center">
                    <el-table-column label="姓名" prop="xm" align="center" width="120" ></el-table-column>
                    <el-table-column label="单位" prop="daszdw" align="center" ></el-table-column>
                    <el-table-column label="操作" align="center" width="100">
                      <template slot-scope="scope">
                        <span class="small-btn delete-red" @click="delInfo(scope.row.id)">
                          <img src="../../../assets/assessment/icon-delete.png"> 删除
                        </span>
                      </template>
                    </el-table-column>
                  </el-table-column>
                </el-table>
              </div>
            </div>
            <div class="button-group distance">
              <div @click="saveEdit">保存</div>
              <div @click="closeDialog">取消</div>
            </div>
          </div>
        </div>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import {getTeacherList,getTeacherDepart} from "@/api/student";
import {syqxList,sqSave} from "@/api/lineData";

export default {
  data() {
    return {
      dialogVisible:false,
      dataForm:{
        xqmc:'',
        teacherIds:[]
      },
      roleData:[],
      selectData:[],
      selectTableData:[],
      defaultProps: {
        children: 'children',
        label: 'deptName',
        value:'id',
        isLeaf:'leaf'
      },
      tableData: [],
      treeForm:{
        gzbm:'',
        xm:'',
      },
      jys:'',
      xq:[],
    };
  },
  mounted(){
    this.commonApi.getXQOption().then(res=>{
      this.xq = res.data;
    })
    this.initList()
  },
  methods: {
    //初始化表格
     async initList(){
      let res = await syqxList(this.dataForm);
      if(res.code == 200){
        this.tableData = [res.data]
      }else{
        this.$message.error(res.msg);
      }
    },
    async givenInfo(){
      let res = await sqSave(this.dataForm)
      if(res.code == 200){
        this.$message.success('授权成功！')
        this.$router.push({
          path:'/teaching/performance/qxSee',
          query:{
            xqmc :this.dataForm.xqmc
          }
        })
      }
    },
    handleSelectionChange(e){
      this.selectData = e;
    },
    removeData(){
      this.selectTableData = this.selectData;
    },
    async initRoleList(){
      let res = await getTeacherList(this.treeForm);
      if(res.code == 200){
        this.roleData = res.data.records;
      }
    },
    openDialog(){
      this.dialogVisible = true;
      this.selectData = [];
      this.selectTableData = [];
      this.roleData = [];
      this.selectTableData = [];

    },
    loadNode(node, resolve) {
        if (node.level === 0) {
            this.initClass(resolve,-1)
        }
        if (node.level >= 1) {
            this.initClass(resolve,node.data.id);
            return resolve([])
        }
    },
    delAll(){
      this.selectTableData = this.selectData = [];
      this.$refs.singleTable.setCurrentRow([]);
    },
    handleNodeClick(data){
      console.log(data)
      this.jys = data.deptName;
      this.treeForm.gzbm = data.deptName
    },
    delInfo(id){
      let data = this.selectData;
      this.selectData = this.selectTableData = data.filter(item=>item.id !==id);
    },
    //获取下级部门
    async initClass(resolve,id){
      let res = await getTeacherDepart({id:id});
      if(res.code == 200){
        resolve(res.data)
      }
    },
    closeDialog(){
      this.dialogVisible = false
    },
    async saveEdit(){
      this.tableData[0].teachers = this.selectData;
      this.dataForm.teacherIds = this.selectData.map(item=>item.id)
      this.dialogVisible = false;
    }
  },
};
</script>
<style lang="less" scoped>
.tableWidth{
  width: calc(50% - 80px);
  position: relative;
}
.table-css {
  margin-top: 30px;
 /deep/ .el-table td,
  .el-table th.is-leaf,
  .el-table--border,
  .el-table--group {
    border-color: #c7d7eb;
  }

  /deep/.el-table__header tr,
  .el-table__header th {
    padding: 0;
    height: 76px;
    background-color: #edf2f9;
    font-size: 16px;
    font-family: Microsoft YaHei;
    font-weight: bold;
    line-height: 20px;
    color: #004ca7;
  }

  /deep/.el-table__body tr,
  .el-table__body td {
    padding: 0;
    height: 86px;
  }
 /deep/ .el-table__footer-wrapper td {
    padding: 0;
    height: 86px;
  }
  /deep/.el-table thead.is-group th.el-table__cell{
    border-color: #c7d7eb;
  }
 /deep/ .el-table--border th, .el-table__fixed-right-patch{
    border-color: #c7d7eb;
  }
}
</style>

<style lang="less" scoped>
@import "../../../styles/commonCss.less";
.right20{margin-right: 20px;}
.width70{width: 70px;}
.search-container {justify-content: flex-start !important;}
.icon{
  display: flex;
  justify-content: center;
  align-items: center;
  img{
    width: 16px;
    height: 16px;
    cursor: pointer;
  }
  a{margin-right: 4px;color: #004CA7;}
}
.red-size{
  color: #FF3819;
  font-size: 12px;
   margin-right: 6px;
}
/deep/.el-dialog__body{
  padding: 0;
}
// 弹窗样式
.top-box{
  border-bottom: 2px solid #004CA7 ;
  padding: 0 0 26px 304px;
}
.bottom-box{
  display: flex;
  .left{
    width: 300px;
    border-right: 1px solid #004CA7;
    padding: 30px 30px 0 30px;
  }
  .right{
    width: calc(100% - 300px);
    padding-left:40px;
    .tableArray{
      width: 100%;
      display: flex;
      align-items: center;
      .right-arrow{
        width: 100px;
        height: 100px;
        cursor: pointer;
      }
      .delete-red{
        margin-top: 10px;
        color: #FA5339;
        background: #FFEFEF;
        border: 1px solid #FA5339;
      }
    }
  }
  .distance{
    padding-bottom: 30px!important;
  }
}
  .position{
    position: absolute;
    right: 12px;
    top: 14px;
    z-index: 1;
    width: 110px!important
  }
</style>
